<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px">
        <el-row>
            <el-col :span="24">

                <p class="tit mb10">病史介绍</p>

            </el-col>
            <el-col :span="24">
                <el-form-item label="现病史" prop="presentList">
                    <el-checkbox-group v-model="form.presentList">
                        <el-checkbox v-for="dict in form.present" @change="forceUpdate()" :label="String(dict.id)" :key="dict.id" :disabled="!edit">
                            {{dict.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="既往病史" prop="pastList">
                    <el-checkbox-group v-model="form.pastList">
                        <el-checkbox v-for="dict in form.past" @change="forceUpdate()" :label="String(dict.id)" :key="dict.id" :disabled="!edit">
                            {{dict.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col :span="21">
                <el-form-item label="其他疾病" prop="other">
                    <el-input v-if="edit" v-model="form.other" type="textarea" rows="4" placeholder="请输入其他疾病" @change="$forceUpdate()"></el-input>
                    <span v-else>{{form.other}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <p class="tit">老人自理情况</p>
            </el-col>
            <el-col :span="21">
                <el-form-item label-width="0">
                    <el-table class="selfcare" border v-loading="loading" :data="form.selfcare" ref="selfCareList" v-tableHeight>
                        <el-table-column label="序号" align="center" prop="id" width="80" />
                        <el-table-column label="维度" align="center" prop="name" />
                        <el-table-column label="操作" align="center" class-name="small-padding">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" prop="select_option_id">
                                    <el-radio-group v-model="form.selfcare[scope.$index].select_option_id" @change="forceUpdate()">
                                        <el-radio class="mb10" v-for="dict in scope.row.option" :key="dict.id" :label="dict.id" :disabled="!edit">
                                            {{dict.name}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-col>
            <el-col :span="21">
                <el-form-item label="其他特殊情况说明" prop="case" label-width="150px">
                    <el-input v-if="edit" v-model="form.case" type="textarea" rows="3" placeholder="请输入其他疾病"></el-input>
                    <span v-else>{{form.case}}</span>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <p class="tit mb10">体检报告</p>
            </el-col>
            <el-col :span="21">
                <el-form-item label-width="0">
                    <el-table border v-loading="loading" :data="form.examin" ref="examinList">
                        <el-table-column label="id" align="center" prop="id" />
                        <el-table-column label="体检项目" align="center" prop="name" />
                        <el-table-column label="资料" align="center">
                            <template slot-scope="scope">
                                <el-form-item label-width="0" prop="examin">
                                    <el-upload v-if="edit" :action="$uploadUrl" :file-list="scope.row.fileList"
                                        list-type="picture-card" :on-preview="handlePictureCardPreview"
                                        :on-success="(res, file) => handleSuccess(res, file, scope.row,scope.$index)"
                                        :on-remove="(file, fileList) => handleRemove(file, fileList, scope.row,scope.$index)">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <span v-else>
                                        <el-image v-if="scope.row.previewList.length>0" class="table-img mr20" :src="scope.row.previewList[0]"
                                            :preview-src-list="scope.row.previewList">
                                        </el-image>
                                        <span>{{scope.row.previewList.length}}张</span>
                                    </span>
                                    <el-dialog :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false">
                                        <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-col>
            <el-col class="row-bg" justify="end" :span="24" v-if="edit">
                <el-button type="primary" size="mini" @click="submit()" :disabled="!customerId">
                    保存</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
import { setHospToHealthy, getHospToHealthy } from "@/api/marketing/admit"
import throttle from 'lodash.throttle'
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        customerId: {
            type: String,
        }
    },
    data() {
        return {
            loading: false,
            form: {
                id: this.customerId,
                other: null,
                case: null,
                presentList: [],
                pastList: [],
                selfcare: [],
                examin: [],
            },
            rules: {
            },
            selfcareStatus: [
                { select_id: 1, dictLabel: '正常' },
                { select_id: 2, dictLabel: '轻度' },
                { select_id: 3, dictLabel: '中度' },
                { select_id: 4, dictLabel: '重度' }
            ],
            dialogImageUrl: '',
            dialogVisible: false,
            edit: true,

        }
    },
    watch: {
        "customerId"(val) {
            if (val) {
                this.$set(this.form, "id", val)
                this.getDetail()
            }
        }
    },
    created() {
        this.edit = this.handleShow == "detail" ? false : true
        this.getDetail()
    },
    methods: {
        forceUpdate() {
            this.$forceUpdate()
            // this.$()
        },
        getDetail() {
            if (this.customerId) {
                getHospToHealthy({ customer_id: this.customerId }).then(res => {
                    this.form = { ...this.form, ...res.data }
                    this.form.presentList = this.form.present_medic ? this.form.present_medic.split(",") : []
                    this.form.pastList = this.form.past_medic ? this.form.past_medic.split(",") : []
                    if (this.form.other_medic) {
                        this.$set(this.form, "other", this.form.other_medic)
                    }
                    if (this.form.exce_case) {
                        this.$set(this.form, "case", this.form.exce_case)
                    }
                    this.form.examin.forEach(e => {
                        if (!this.edit) {
                            e.previewList = e.data
                        }
                        e.fileList = []
                        if (e.data) {
                            e.data.forEach(element => {
                                e.fileList.push({ url: element })
                            });
                            e.data = e.data.join("|")
                        }
                    })
                })
            }
        },
        handleSuccess(res, file, row, index) {
            this.form.examin[index].data = this.form.examin[index].data ? (this.form.examin[index].data + "|" + res.data[0].fileurl) : res.data[0].fileurl
        },
        handleRemove(file, fileList, row, index) {
            console.log(file.url, 44444)
            let arr = this.form.examin[index].data.split("|")
            let num;
            arr.forEach((e, i) => {
                if (e == file.url) {
                    num = i
                }
            });
            arr.splice(num, 1)
            this.form.examin[index].data = arr.join("|")
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.form.present = this.form.presentList.join(",")
                    this.form.past = this.form.pastList.join(",")

                    this.form.examin.forEach(e => {
                        e.result = ''
                        e.fileList = []
                        delete e.name
                        delete e.sort
                        delete e.status
                        if (e.previewList) {
                            delete e.previewList
                        }
                    });
                    setHospToHealthy(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.loading = false;
                        this.getDetail()
                        this.$emit("update", "third")
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    }
}
</script>

<style lang='scss' scoped>
.tit {
    font-size: 14px;
    color: #666666;
    font-weight: 600;
    border-left: 5px solid #409eff;
    padding-left: 8px;
    height: 14px;
    line-height: 14px;
}
/deep/.el-upload--picture-card {
    width: 70px;
    height: 70px;
    line-height: 70px;
    i {
        font-size: 20px;
    }
}
/deep/.el-upload-list--picture-card {
    .el-upload-list__item {
        width: 70px;
        height: 70px;
    }
}
.row-bg {
    display: flex;
    justify-content: flex-end;
}
// .selfcare {
//     /deep/.el-radio {

//     }
// }
</style>
